import { View, Text, StyleSheet, TouchableOpacity, Modal, FlatList, Platform } from "react-native"
import { X } from "lucide-react-native"
import { theme } from "../../constants/theme"

// 单词列表项的数据结构
export interface WordListItem {
    id: string
    word: string
    phonetic: string
    meaning?: string
}

interface WordListModalProps {
    visible: boolean
    data: WordListItem[]
    currentIndex: number
    onClose: () => void
    onSelectWord: (index: number) => void
    title?: string
}

export function WordListModal({
    visible,
    data,
    currentIndex,
    onClose,
    onSelectWord,
    title = "单词列表",
}: WordListModalProps) {
    return (
        <Modal visible={visible} transparent animationType="fade" onRequestClose={onClose}>
            <View style={styles.modalOverlay}>
                <View style={styles.modalContent}>
                    <View style={styles.modalHeader}>
                        <Text style={styles.modalTitle}>{title}</Text>
                        <TouchableOpacity style={styles.modalCloseButton} onPress={onClose}>
                            <X size={24} color={theme.colors.neutral.darkGray} />
                        </TouchableOpacity>
                    </View>

                    <FlatList
                        data={data}
                        keyExtractor={(item) => item.id}
                        renderItem={({ item, index }) => (
                            <TouchableOpacity
                                style={[styles.wordListItem, currentIndex === index && styles.wordListItemActive]}
                                onPress={() => onSelectWord(index)}
                            >
                                <View style={styles.wordListItemNumber}>
                                    <Text style={styles.wordListItemNumberText}>{index + 1}</Text>
                                </View>
                                <View style={styles.wordListItemContent}>
                                    <Text style={styles.wordListItemWord}>{item.word}</Text>
                                    <Text style={styles.wordListItemPhonetic}>{item.phonetic}</Text>
                                    {item.meaning && (
                                        <Text style={styles.wordListItemMeaning} numberOfLines={1}>
                                            {item.meaning}
                                        </Text>
                                    )}
                                </View>
                                {currentIndex === index && <View style={styles.wordListItemCurrentIndicator} />}
                            </TouchableOpacity>
                        )}
                        contentContainerStyle={styles.wordListContainer}
                    />
                </View>
            </View>
        </Modal>
    )
}

const styles = StyleSheet.create({
    modalOverlay: {
        flex: 1,
        backgroundColor: "rgba(0, 0, 0, 0.5)",
        justifyContent: "center",
        alignItems: "center",
    },
    modalContent: {
        width: "90%",
        maxHeight: "80%",
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.extraLarge,
        overflow: "hidden",
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.3)",
                shadowOffset: { width: 0, height: 5 },
                shadowOpacity: 0.5,
                shadowRadius: 10,
            },
            android: {
                elevation: 10,
            },
        }),
    },
    modalHeader: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        padding: theme.spacing.lg,
        borderBottomWidth: 1,
        borderBottomColor: theme.colors.neutral.lightGray,
    },
    modalTitle: {
        fontSize: theme.fontSize.lg,
        fontWeight: theme.fontWeight.bold,
        color: theme.colors.primary.default,
    },
    modalCloseButton: {
        padding: theme.spacing.sm,
    },
    wordListContainer: {
        padding: theme.spacing.md,
    },
    wordListItem: {
        flexDirection: "row",
        alignItems: "center",
        padding: theme.spacing.md,
        borderRadius: theme.borderRadius.medium,
        marginBottom: theme.spacing.sm,
        backgroundColor: "rgba(91, 142, 244, 0.05)",
        position: "relative",
    },
    wordListItemActive: {
        backgroundColor: "rgba(91, 142, 244, 0.15)",
        borderWidth: 1,
        borderColor: theme.colors.primary.default,
    },
    wordListItemNumber: {
        width: 28,
        height: 28,
        borderRadius: 14,
        backgroundColor: theme.colors.primary.light,
        alignItems: "center",
        justifyContent: "center",
        marginRight: theme.spacing.md,
    },
    wordListItemNumberText: {
        fontSize: theme.fontSize.sm,
        fontWeight: theme.fontWeight.bold,
        color: theme.colors.neutral.white,
    },
    wordListItemContent: {
        flex: 1,
    },
    wordListItemWord: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.black,
        marginBottom: 2,
    },
    wordListItemPhonetic: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.gray,
    },
    wordListItemMeaning: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.darkGray,
        marginTop: 2,
    },
    wordListItemCurrentIndicator: {
        width: 8,
        height: 8,
        borderRadius: 4,
        backgroundColor: theme.colors.primary.default,
        marginLeft: theme.spacing.md,
    },
})

